<template>
	<view class="app">
		<ReturnComponrnts></ReturnComponrnts>
		<view class="content">
			<view class="list" >
				<ul v-for="(item, index) in listData" key="index">
					<li @click="select(item)">
						<view class="name">
							姓名：
							<text>{{item.contactName}}</text>
						</view>
						<view class="tag">
							地址：
							<text>{{item.tag}}</text>
						</view>
						<view class="phone">
							联系方式：
							<text>{{item.contactPhone}}</text>
						</view>
						<button @click="deleteress(item.id)">删除</button>
					</li>
				</ul>
			</view>
			<view class="bnt">
				<button @click="isShowModal">
					<img src="/static/icon/add.png" alt="" />
					<text>添加收货地址</text>
					</button>
			</view>

		</view>

		<LocationModal v-model="isShow">
			<view class="inputBox">
				<ul>
					<li>
						<text>地址:</text>
						<input type="text" v-model="tag" placeholder="送到哪个寝室或教室（如3栋305）"/>
						
					</li>
					<li>
						<text>姓名:</text>
						<input type="text" v-model="contactName" placeholder="收件人姓名"/>
					</li>
					<li>
						<text>联系方式:</text>
						<input type="text" v-model="contactPhone" placeholder="手机号"/>
					</li>
				</ul>
				<button @click="ressesAdd">完成</button>
			</view>
		</LocationModal>
	</view>
</template>

<script setup lang="ts">
	import ReturnComponrnts from '../../components/ReturnComponrnts'
	import LocationModal from '../../components/LocationModal'
	import { ref } from 'vue';
	import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app'
	import { resses, getAddressList, deleteAddress } from '@/api/api'
	import {useUserStore} from '../../store/index';

	const userStore = useUserStore()

	
	const listData = ref([])


	let userId = ''
	const tag = ref('')
	const contactName = ref('')
	const contactPhone = ref('')

	const isShow = ref(false)


	const isShowModal = () => {
		isShow.value = true
	}

	const ressesAdd = async () => {
		const res = await resses({
			userId,
			tag: tag.value,
			address: '无',
			contactName: contactName.value,
			contactPhone: contactPhone.value
		})
		console.log(res.code)
		if (res.code === 200) {
			console.log('添加成功')
			isShow.value = false

			const listRes = await getAddressList(userId)
			if (listRes.code === 200) {
				listData.value = listRes.addresses
			}
		} else {
			console.error('添加失败')
		}
	}
	
	const deleteress = async(id:string) => {
		const res = await deleteAddress(id);
		if(res.code === 200){
			    uni.showToast({ title: '删除成功' });
			    // 可以重新获取列表：
			    const listRes = await getAddressList(userId);
					if(listRes.code === 200){
						listData.value = listRes.addresses
					}
		}else {
			console.error('添加失败')
		}
	}
	
	const select = (i) => {
		userStore.resses = i
	}
	onShow(async () => {
		userId = uni.getStorageSync('loginCode')
		const res = await getAddressList(userId)

		if (res.code === 200) {
			listData.value = res.addresses
		} else {
			uni.showToast({ title: res.message || '加载失败', icon: 'none' })
		}
	})
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
		list-style: none;
	}

	.app {
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		width: 100%;
		height: 100vh;
		background: linear-gradient(to bottom right, #d0f5e7, #ffffff);

		.content {
			width: 100%;
			.list{
				ul{
					padding: 0;
					li{
						padding: 20rpx;
						width: 100%;
						margin: 20rpx auto;
						background-color: #fff;
						border-radius: 15rpx;
						box-shadow: 2px 2px 10px #444;
						view{
							margin: 10rpx auto;
						}
					}
				}
			}
			.bnt {
				width: 100%;
				height: 80rpx;
				margin: 70rpx auto;

				button {
					width: 320rpx;
					height: 100%rpx;
					background-color: #fff;
					box-shadow: 3px 1px 15px #666;
					// letter-spacing: 8rpx;
					font-size: 35rpx;
					color: #444;
					display: flex;
					align-items: center;
					border-radius: 20rpx;
					img{
						width: 50rpx;
						height: 50rpx;
					}
					text{
						flex: 7;
					}
				}
			}

		}

		.inputBox {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;

			button {
				margin: 20rpx auto;
			}

			ul {
				margin: 0 auto;
				max-width: 800px;
				width: 100%;
				display: flex;
				flex-direction: column;
				padding: 0;

				li {
					background-color: #f1f1f1;
					border-radius: 15rpx;
					padding: 0 10rpx;
					margin: 20rpx auto;
					width: 100%;
					height: 80rpx;
					list-style: none;
					display: flex;
					justify-content: space-between;

					text {
						flex: 1.5;
						height: 100%;
						line-height: 80rpx;
						font-size: 20rpx
					}

					input {
						flex: 8.5;
						height: 100%;
						margin-left: 25rpx;
					}
				}
			}
		}
	}
</style>